package
{
	import flash.display.MovieClip;
	import flash.display.Shape;
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.text.*;
	import flash.utils.Timer;
	
	/** This class provides an animated introduction to the item, in the space that will be the drawing panel */
	public class ItemIntroPanel extends MovieClip
	{
		// public constants
		public static const ANIMATION_TIME:uint = 1000;
		// public vars
		public var WIDTH:Number, HEIGHT:Number, TITLE_HEIGHT:Number;
		// private objects
		private var xml:XML;
		private var timer:Timer;
		private var banner:Shape;
		private var button:MyButton;
		private var parentPolygons:Array;
		private var typeTFields:Array;
		private var titleTField:TextField, instructionsTField:TextField;
		// private vars
		private var TIMER:uint;
		private var polygonsOnThis:uint, tfieldsOnThis:uint; // for animation
		
		/* Remember to include parent shapes, in the correct order */
		public function ItemIntroPanel(WIDTH:Number, HEIGHT:Number, TITLE_HEIGHT:Number, xml:XML, parentPolygons:Array, TIMER:uint=1000)
		{
			this.WIDTH = WIDTH;
			this.HEIGHT = HEIGHT;
			this.TITLE_HEIGHT = TITLE_HEIGHT;
			this.xml = xml;
			this.parentPolygons = parentPolygons;
			this.TIMER = TIMER;
			this.addEventListener(Event.ADDED, handleAdded);
		}
		private function handleAdded(event:Event):void
		{
			this.removeEventListener(Event.ADDED, handleAdded);
			// draw background
			this.graphics.beginFill(0xEEEEFF);
			this.graphics.drawRect(0,0,WIDTH,HEIGHT);
			this.graphics.endFill();
			// draw banner for title
			//banner = new Shape();
			this.graphics.beginFill(0xAA0000);
			this.graphics.drawRect(0, 0, WIDTH, TITLE_HEIGHT);
			this.graphics.endFill();
			// draw title
			titleTField = new TextField();
			titleTField.mouseEnabled = false;
			titleTField.selectable = false;
			titleTField.defaultTextFormat = new TextFormat("arial", 30, 0xFFFFFF);
			titleTField.text = "Here are all the parent shapes.";
			titleTField.autoSize = "left";
			titleTField.x = (this.width-titleTField.width)/2;
			titleTField.y = (TITLE_HEIGHT - titleTField.height)/2;
			this.addChild(titleTField);
			
			// draw shapes on canvas
			if (parentPolygons.length <= 8)
			{
				typeTFields = new Array();
				for (var i:int=0; i < parentPolygons.length; i++)
				{
					var ppolygon:ParentPolygon = parentPolygons[i];
					ppolygon.x = (i%4)/4*WIDTH + (WIDTH/4 - ppolygon.width)/2; // place in correct quadrant, then center;
					ppolygon.y = Math.floor(i/4)/2*HEIGHT + (HEIGHT/2 - ppolygon.height)/2 - 30;
					this.addChild(ppolygon);
					
					var tfield:TextField = new TextField();
					tfield.mouseEnabled = false;
					tfield.selectable = false;
					tfield.defaultTextFormat = new TextFormat("arial", 20, 0x444444, null, null, null, null, null, "center");
					tfield.text = ppolygon.type.split("_").join(" ");
					// go through the words in type, find the longest word, make the width commensurate to fit it
					var wordlength:uint = 0;
					var longword:String = "";
					
					for each (var word:String in ppolygon.type.split("_"))
					{
						if (word.length > wordlength){ wordlength = word.length; longword=word; }
					}
										
					if (ppolygon.type.split("_").length > 0)
					{
					
						tfield.wordWrap = true;
						// create a temporary textfield
						var _tfield:TextField = new TextField();
						_tfield.defaultTextFormat = new TextFormat("arial", 20, 0x444444, null, null, null, null, null, "center");
						_tfield.text = String(longword+" ");
						_tfield.autoSize = "left";
						tfield.width = _tfield.width + tfield.defaultTextFormat.size;
						_tfield = null;
					} 
					tfield.autoSize = "center";
					tfield.x = ppolygon.x + (ppolygon.WIDTH - tfield.width)/2;
					tfield.y = ppolygon.y + ppolygon.HEIGHT;
					this.addChild(tfield);
					typeTFields.push(tfield);
				}
			} else
			{
				trace(parentPolygons.length, "shapes are not supported");	
			}
			// draw instructions
			instructionsTField = new TextField();
			instructionsTField.mouseEnabled = false;
			instructionsTField.selectable = false;
			instructionsTField.defaultTextFormat = new TextFormat("arial", 24, 0x0000AA);
			instructionsTField.text = "Can you build a child for each?";
			instructionsTField.autoSize = "left";
			instructionsTField.x = (this.width-instructionsTField.width)/2;
			instructionsTField.y = this.HEIGHT - instructionsTField.height - 10; // after final tfield
			//this.addChild(instructionsTField);
			
			
			// set a timer
			timer = new Timer(TIMER, 1);
			timer.addEventListener(TimerEvent.TIMER_COMPLETE, handleTimerComplete);
			timer.start();
		}
		
		private function handleTimerComplete (event:TimerEvent):void
		{
			timer.stop();
			timer.removeEventListener(TimerEvent.TIMER_COMPLETE, handleTimerComplete);
			button = new MyButton(300, 40, 20, 20,20,0x88FF88, "Can you build a child for each?", 0x224422, 0xAAFFAA, "Can you build a child for each?", 0x224422, 0xDDFFDD, "Can you build a child for each?", 0x224422);
			button.x = (this.width - button.width)/2;
			button.y = this.HEIGHT - button.height - 10;
			button.addEventListener(Event.COMPLETE, handleButtonComplete);
			this.addChild(button);
		}
		private function handleButtonComplete (event:Event):void
		{
			button.removeEventListener(Event.COMPLETE, handleButtonComplete);	
			// we will begin a final animation
			polygonsOnThis = parentPolygons.length;
			tfieldsOnThis = typeTFields.length;
			this.addEventListener(Event.ENTER_FRAME, finalAnimation);
		}
		/** An animation in which the names fly up and the shapes fly right */
		private function finalAnimation(event:Event):void
		{
			var fps:Number = this.stage.frameRate;
			for each (var p:ParentPolygon in parentPolygons)
			{
				if (p.parent == this)
				{
					p.x -= WIDTH/(fps*ANIMATION_TIME/1000);	
					if (p.x <= 0)
					{
						polygonsOnThis--;
						this.removeChild(p);
					}
				}
			}
			for each (var t:TextField in typeTFields)
			{
				if (t.parent == this)
				{
					t.y -= HEIGHT/(fps*ANIMATION_TIME/1000);	
					if (t.y <= TITLE_HEIGHT)
					{
						tfieldsOnThis--;
						this.removeChild(t);
					}
				}
			}
			if (polygonsOnThis == 0 && tfieldsOnThis == 0) completeAnimation();
		}
		private function completeAnimation():void
		{
			this.removeEventListener(Event.ENTER_FRAME, finalAnimation);
			for each (var p:ParentPolygon in parentPolygons)
			{
				p.x = 0; p.y = 0;
			}
			this.removeChildren(0, this.numChildren-1);
			this.dispatchEvent (new Event(Event.COMPLETE));
		}
	}
}